<template>
    <div class="m-form">
        <el-form ref="mform" :inline="isInline" :model="mform" class="m-form-content" :label-width="labelWidth">
            <el-form-item
                :class="isInline?'m-form-item-inline':'m-form-item'"
                v-for="item in formData"
                :key="item.name"
                :label-width="item.labelWidth?item.labelWidth:null"
                :label="item.label"
                :prop="item.name">

                <!-- 单行文本输入框 -->
                <el-input
                    v-if="item.type==='text'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-input>

                <!-- 下拉单选框 -->
                <el-select
                    v-if="item.type==='select'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    :placeholder="item.placeholder?item.placeholder:'请选择'+item.label">
                    <el-option
                        v-for="o in item.options"
                        :key="o.id"
                        :label="o.text"
                        :value="o.id">
                    </el-option>
                </el-select>

                <!-- 单选开关 -->
                <el-switch
                    v-if="item.type==='switch'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]">
                </el-switch>

                <!-- 多选组 -->
                <el-checkbox-group
                    v-if="item.type==='checkbox'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]">
                    <el-checkbox
                        v-for="o in item.options"
                        :key="o.id"
                        :label="o.id">
                        {{o.id}}
                    </el-checkbox>
                </el-checkbox-group>

                <!-- 单选组 -->
                <el-radio-group
                    v-if="item.type==='radio'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]">
                    <el-radio
                        v-for="o in item.options"
                        :key="o.id"
                        :label="o.id">
                        {{o.text}}
                    </el-radio>
                </el-radio-group>

                <!-- 多行输入框 -->
                <el-input
                    v-if="item.type==='textarea'"
                    type="textarea"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    :maxlength="item.maxlength ? item.maxlength : 256"
                    :rows="3"
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-input>

                <!-- 密码输入框 -->
                <el-input
                    v-if="item.type==='password'"
                    type="password"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    show-password
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-input>

                <!-- 计数器 -->
                <el-input-number
                    v-if="item.type==='number'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    :min="item.min"
                    :max="item.max">
                </el-input-number>

                <!-- 日期选择器（年月日） -->
                <el-date-picker
                    v-if="item.type==='date'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    type="date"
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-date-picker>

                <!-- 时间选择器 （时分秒） -->
                <el-time-picker
                    v-if="item.type==='time'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    :picker-options="item.timeOptions"
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-time-picker>

                <!-- 日期时间选择器 （年月日+时分秒） -->
                <el-date-picker
                    v-if="item.type==='datetime'"
                    :disabled="item.disabled"
                    :style="{width:itemWidth ? itemWidth : '150px'}"
                    :size="isSearch ? 'small' : null"
                    v-model="mform[item.name]"
                    type="datetime"
                    :placeholder="item.placeholder?item.placeholder:'请输入'+item.label">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <div class="button-content">
                    <el-button
                        v-for="item in showButtonList"
                        :key="item.id"
                        :type="item.type"
                        :icon="item.icon"
                        :size="item.size"
                        :loading="item.loading"
                        @click="item.click(searchButtonList, that, $parent)">
                        {{item.name}}
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'm-form',
    components: {
    },
    props: {
        // 是否为搜索栏
        isSearch: {
            type: Boolean,
            default: false
        },
        // form-item是否都在同一行
        isInline: {
            type: Boolean,
            default: false
        },
        // form表单的宽度
        labelWidth: {
            type: String,
            default: '80px'
        },
        // 查询表单的数据
        formData: {
            type: Array,
            default: () => { }
        },
        // 按钮的数据
        searchButtonList: {
            type: Array,
            default: () => { }
        },
        // 表单输入框宽度
        itemWidth: {
            type: String,
            default: ''
        },
    },
    data () {
        return {
            // 表单数据
            mform: {},
            // 获取该页面的this，用于按钮的方法调用
            that: this
        }
    },
    watch: {
        // 获取传入的表单数据，渲染mform
        formData: {
            handler (newVal, oldVal) {
                newVal.forEach(item => {
                    this.$set(this.mform, item.name, item.value)
                })
            },
            immediate: true,
        }
    },
    computed: {
        // 获取传入的按钮数据，渲染按钮
        showButtonList () {
            if (!this.searchButtonList) {
                return []
            }
            return this.searchButtonList.filter(item => {
                return !item.isHide
            })
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.m-form {
    display: flex;
    align-items: center;
    .m-form-content {
        width: 100%;
        scrollbar-width: none;
        scrollbar-color: #9b9b9b #ededed;
        .el-form-item {
            margin-bottom: 15px;
            margin-right: 0;
        }
        .m-form-item-inline {
            width: 20%;
        }
        .m-form-item {
        }
    }
}
.button-content {
    padding-left: 10px;
}
</style>